<!--
 * @Description: 
 * @Author: william
 * @Date: 2025-06-03 09:21:17
 * @LastEditors: william
 * @LastEditTime: 2025-11-10 16:14:00
-->
<template>
  <view
    class="nw-dialog"
    :style="{
      height: windowHeight,
      top: titleHeight,
      bottom: tabbarHeight
    }"
    :="$attrs"
  >
    <view class="mask"></view>
    <view class="nw-overlay-dialog">
      <view class="nw-dialog-content">
        <view v-if="title && showClose" class="nw-dialog-header">
          <view class="title">{{ title }}</view>
          <view v-if="showClose" class="close-wrap" @click="dialogClose(1)">
            <uni-icons
              type="closeempty"
              :size="closeIconSize"
              :color="closeIconColor"
            ></uni-icons>
          </view>
        </view>
        <view class="nw-dialog-body">
          <slot></slot>
        </view>
        <view class="nw-dialog-footer">
          <view class="btns" v-if="showCancelButton || showConfirmButton">
            <nw-Button
              v-if="showCancelButton"
              :text="cancelText"
              class="nw-dialog-cancel-button"
              @click="dialogClose(2)"
            ></nw-Button>
            <nw-Button
              v-if="showConfirmButton"
              :text="confirmText"
              :loading="btnLoading"
              loadingText="加载中..."
              :loadingSize="btnLoadingSize"
              class="nw-dialog-confirm-button"
              @click="dialogConfirm"
            ></nw-Button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
defineOptions({
  name: 'CustomModal',
  inheritAttrs: false
})

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  isTitle: {
    type: Boolean,
    default: true
  },
  isTabbar: {
    type: Boolean,
    default: false
  },
  showClose: {
    type: Boolean,
    default: true
  },
  disabledCancelButtonClose: {
    type: Boolean,
    default: false
  },
  // 关闭图标大小，以rpx为单位
  closeIconSize: {
    type: [String, Number],
    default: g_utils.rpxToPx(18)
  },
  closeIconColor: {
    type: String,
    default: '#333'
  },
  showCancelButton: {
    type: Boolean,
    default: true
  },
  showConfirmButton: {
    type: Boolean,
    default: true
  },
  cancelText: {
    type: String,
    default: '取消'
  },
  confirmText: {
    type: String,
    default: '确定'
  },
  asyncClose: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['close', 'cancel', 'confirm'])
const visible = defineModel({
  type: Boolean,
  default: false
})
const windowHeight = ref('')
const contentMaxHeight = ref('')
const titleHeight = ref('')
const tabbarHeight = ref('')
const btnLoadingSize = ref(g_utils.rpxToPx(22))
const btnLoading = ref(false)

onMounted(_ => {
  const pageParams = g_utils.getPageNum(props.isTitle, props.isTabbar)
  windowHeight.value = pageParams.height + 'px'
  contentMaxHeight.value = `calc(${windowHeight.value} - 184rpx)`
  titleHeight.value = pageParams.titleHeight + 'px'
  tabbarHeight.value = pageParams.tabbarHeight + 'px'
})

const dialogClose = type => {
  if (!props.disabledCancelButtonClose || type === 1) {
    visible.value = false
    emit('close')
  } else {
    emit('cancel')
  }
}
const dialogConfirm = _ => {
  if (props.asyncClose) {
    btnLoading.value = true
  }
  emit('confirm')
}

defineExpose({
  windowHeight,
  contentMaxHeight
})
</script>

<style lang="scss" scoped>
.nw-dialog {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99;
  .mask {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(8, 7, 7, 0.52);
  }
  .nw-overlay-dialog {
    width: 100%;
    height: 100%;
    padding: 92rpx;
    display: flex;
    align-items: center;
    box-sizing: border-box;
  }
  .nw-dialog-content {
    position: relative;
    z-index: 10;
    // top: 50%;
    // transform: translateY(-50%); // transform会影响子元素的fixed定位，创建新的层叠上下文
    display: flex;
    flex-direction: column;
    width: 100%;
    height: initial;
    max-height: 100%;
    padding: 30rpx 40rpx;
    background-color: var(--bg-color);
    border-radius: 32rpx;
    box-sizing: border-box;
  }
  .nw-dialog-body {
    max-height: 100%;
    overflow-y: auto;
    font-size: 22rpx;
    font-weight: 400;
    color: var(--color-333);
    box-sizing: border-box;
  }
}

.nw-dialog-header {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  .title {
    line-height: 24rpx;
    font-size: 24rpx;
    font-weight: bold;
    color: var(--color-333);
  }
  .close-wrap {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    padding: 8rpx;
    box-sizing: content-box;
  }
}

.btns {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10rpx 6rpx;
  .nw-button-wrap {
    flex: 1;
    &:first-child {
      margin-right: 8rpx;
    }
    &:last-child {
      margin-left: 8rpx;
    }
  }
  :deep(.nw-button) {
    flex: 1;
    height: 54rpx;
    margin: initial;
    border-radius: 28rpx;
    box-sizing: border-box;
    .u-button__text {
      font-size: 22rpx !important;
      font-weight: 400;
    }
    .u-button__loading-text {
      font-size: 22rpx !important;
      font-weight: 400;
    }
    &:not(.u-button--disabled) .u-button__text {
      color: var(--color-fff);
    }
  }
}
</style>
